<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
            <div class="widget-title am-fl">宣传图配置</div>
            <div class="widget-function am-fr">
                <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
            </div>
        </div>
        <div class="widget-body  am-fr">
            <div class="public-search am-u-sm-12">
                <label class="am-u-sm-2 am-form-label">
                    <span class="am-text-danger am-margin-right-xs am-text-xs"></span>区域:
                </label>
                <div class="am-u-sm-6 am-fl form-last-left">
                    <el-select size="small" class="am-u-sm-6 am-fl form-last-left " :disabled = "disabled"
                        v-model="query.areaTeamId" placeholder="请选择区域">
                            <el-option
                            v-for="item in areaTeams"
                            :key="item.areaTeamId"
                            :label="item.name"
                            :value="item.areaTeamId">
                            </el-option>
                    </el-select>
                </div>
            </div>
            <div class="public-search am-u-sm-12">
                <label class="am-u-sm-2 am-form-label">
                    <span class="am-text-danger am-margin-right-xs am-text-xs"></span>页面:
                </label>
                <div class="am-u-sm-6 am-fl form-last-left">
                    <el-select size="small" class="am-u-sm-6 am-fl form-last-left "
                        v-model="query.page" placeholder="请选择页面">
                        <el-option
                        v-for="item in pages"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                   
                </div>
             </div>
            <div class="public-search am-u-sm-12">
                <label class="am-u-sm-2 am-form-label">
                    <span class="am-text-danger am-margin-right-xs am-text-xs"></span>位置:
                </label>
                <div class="am-u-sm-6 am-fl form-last-left form-last-input">
                     <el-input v-model="query.position" size="small"  placeholder="请输入位置"></el-input>
                </div>
            </div>
            <div class="form am-u-sm-12">
                <div class="am-form-group">
                    <label class="am-u-sm-2 am-form-label">
                        <span class="am-text-danger am-margin-right-xs am-text-xs">*</span>请上传图片:
                    </label>
                    <div class="am-u-sm-6 am-fl form-last-left form-last-input">
                        <v-file-upload extensions="jpg,png,jepg" @uploaded="handleUpload"></v-file-upload>
                         <em class="public-pic-size">*请上传相同大小的图片</em>
                        <img class="am-margin-top am-radius" :src="query.picUrl" style="width:168px;height:168px;" v-if="query.picUrl" >
                        <p>{{query.picName}}</p>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-2 am-form-label" for="link">
                        <span class="am-text-danger am-margin-right-xs am-text-xs"></span>请输入跳转链接:
                    </label>
                    <div class="am-u-sm-6 input-field form-last-left form-last-input">
                        <el-input v-model="query.clickUrl" size="small" id="link"  placeholder="请输入跳转链接"></el-input>
                    </div>
                </div>
                <div class="am-form-group" style="text-align: center">
                    <button type="button" size="big" class="am-btn am-btn-primary" @click="handleSave">保存</button>
                </div>
            </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import io from '../../lib/io/index'
import VFileUpload from '../base/FileUpload'
  export default{
    data: function () {
      return {
        pages:[
            {
              label:"首页",
              value:"index",
            }
        ],
        query:{
            areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
            page:'',
            clickUrl:'',
            picUrl:'',
            picName:'',
            position:'',
            
        },
        adId:"",
        disabled:false
      }
    },
    components: {
      VFileUpload
    },
    mounted: function () {
      $(window).smoothScroll()
    },
    created: function () {
        this.adId = this.$route.query.adId
        console.log(this.adId)
        if(this.adId){
            this.disabled = true
            this.queryadConfig()
        }else{
           this.query = {
                areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
                page:'',
                clickUrl:'',
                picUrl:'',
                picName:'',
                position:'',
           } 
        }
    },
    computed:{
        areaTeams: function () {
            console.log(this.$root.config.areaTeams)
            return this.$root.config.areaTeams || []
        },
    },
    methods: {
        queryadConfig(){
            let param ={
                adId:this.adId
            }
            io.post(io.adConfig,param,(ret)=>{
                if(ret.success){
                    this.query = ret.data
                }else{
                     this.$alert(ret.desc)
                }
            })
        },
        handleSave(){
            let param = {}
            param = this.query
            if(!param.page){
                this.$alert("请选择页面")
                return false
            }
            if(!param.position){
                this.$alert("请输入位置")
                return false

            }
            if(!param.picUrl){
                this.$alert("请上传图片")
                return false

            }
            if(!param.clickUrl){
                this.$alert("请输入跳转链接")
                return false

            }
            if(!this.adId){
                io.post(io.addAdConfig,param,(ret)=>{
                    if (ret.success) {
                        this.$router.push("/main/online/publicPictureSetting")
                    } else {
                        this.$alert(ret.desc)
                    }
                })
            }else{
                io.post(io.updateAdConfig,param,(ret)=>{
                    if (ret.success) {
                        this.$router.push("/main/online/publicPictureSetting")
                    } else {
                        this.$alert(ret.desc)
                    }
                })
            }
             
            
        },
        handleUpload(info) {
            console.log(info)
            this.query.picUrl = info.url 
            this.query.picName = info.original
        },
    }
  }
</script>
<style scoped lang="less">
  .red {
    color: red;
  }
  .content-tooltip {
    unicode-bidi: embed;
    white-space: pre;
    font-size: 14px;
    line-height: 1.5;
  }
  .public-search{
    margin-bottom:20px;
    overflow:hidden;
  }
  .widget-body{
        .form-last-left{
            float:left;
            &.form-last-input{
                padding-left:20px;
            }
        }
        .am-form-label{
          text-align:right;
        }
  }
  .form{
        padding:20px 0;
        .am-form-group{
            overflow:hidden;
        }
        .form-input{
            width:50%;
        }
        .form-last-left{
            padding-left:20px;
        }
  }
  .public-pic-size{
      position:absolute;
      top:10px;
      left:200px;
      font-size:12px;
      color:red;
      font-style: normal;
  }
</style>
